header,footer{
    width: 100%;
    position: fixed;
    left: 0;
    margin: 0;
    padding: 0;
    display: inline-block;
    z-index: 999;
}

header{
    top: 0;
    height: 46px;
}

.bg-black {
  background-color: var(--van-black);
}

.bg-nav {
  background-color: var(--van-nav-bar-background);
}

.btn {
  height: 3.5rem !important;
  width: 3.5rem;
  display: flex !important;
  ;
  justify-content: center;
  align-items: center;
}

/* 正方形大按钮 */
.btn-large {
  height: 4.5rem !important;
  width: 4.5rem;
}

.btn>.van-button__content>.van-button__icon {
  font-size: 1.5rem;
}

.btn-large>.van-button__content>.van-button__icon {
  font-size: 2rem;
}
/* 背景模糊 */
.blur-10-9 {
  backdrop-filter: blur(10rem);
  background: rgba(0, 0, 0, .9);
}

.blur-1-5 {
  backdrop-filter: blur(1rem);
  background: rgba(0, 0, 0, .5);
}

.van-badge--center{
  transform: none!important;
}

section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .header,.footer {
        width: inherit;
        height: 46px;
    }
    .container {
        overflow-y: auto;
        flex: 1;
        padding: 0;
        margin: 0;
        position: relative;
        width: inherit;
        display: inline-block;
    }
    .moment-container{
      box-sizing: border-box;
      background: var(--common-search-background) !important;
    }
    .footer{
        height: 64px;
    }
}

footer{
    bottom: 0;
    height: 64px;
    z-index: 999;
}

/*注册登录样式*/
.common,.register,.login {
  /* 重写Vant Form样式*/
  .van-form .van-cell-group {
    background: var(--friend-remark-from-input-background);
    border-radius: 0.5rem;
    font-size: 1.2rem;
    padding: 1rem;
    .van-field{
      background: var(--friend-remark-from-input-background);
    }
  }

  >.van-cell-group .van-cell--center .van-cell__title {
    display: flex;
    --webkit-display: flex;
    align-items: center;
    --webkit-align-items: center;
  }
  .right-box {
    height: 2.5rem;
    span {
      color: var(--theme-gray-70);
    }
  }
  .left-box {
    margin-left: 0.5rem;
    height: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    > span {
      display: block;
      line-height: 18px;
    }
    > span:first-child {
      font-size: 18px;
    }
    > span:last-child {
      width: 15rem;
      white-space: nowrap; /* 确保文本不会换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示为省略号 */
      color: var(--theme-gray-70);
    }
  }
}
.register,.login {
  background: var(--friend-remark-background);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .van-uploader>.van-uploader__wrapper{
    justify-content: center;
  }
}

/*消息弹窗通知样式*/
.message-popup > .van-grid-item__content > .van-grid-item__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: 10rem;
  display: block;
}
.message-popup-at > .van-grid-item__content > .van-grid-item__text{
  color: var(--van-warning-color);
}

/*聊天窗口样式*/
.message-box {
  section {
    background-position: center;
    background-size: cover;
    .container {
      .message-list {
        width: inherit;
        padding: 0.5rem 1rem 0 1rem;
        box-sizing: border-box;
        li,article{
          width: inherit;
          box-sizing: border-box;
          padding: 0;
        }
        >li {
          display: block;
          padding-right: 3.5rem;
          padding-left: 0;
        }
        >li.right{
          padding-right: 0;
          padding-left: 3.5rem;
        }
        >li>.normal-message {
          display: flex;
          margin-bottom: 0.5rem;
          >.avatar{
            width: 3.5rem;
            img {
              width: inherit;
              height: 3.5rem;
              border-radius: 0.35rem;
            }
          }
          >.content{
            display: flex;
            flex-direction: column;
            padding-left: 0.7rem;
            padding-right: 0;
            max-width: calc(100% - 3.5rem);
            box-sizing: border-box;
          }
          >.content>span {
            color: var(--theme-gray-70);
            font-size: 14px;
            line-height: 18px;
            display: block;
          }

          >.content>.right {
            text-align: right;
          }

          >.content>.msg {
            display: flex;
            >.tri {
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 0.7rem 1rem 0;
              margin-right: -1px;
              border-color: transparent #ffffff transparent transparent;
            }

            >.msg_inner {
              max-width: 100%;
              box-sizing: border-box;
              background-color: #fff;
              padding: 1rem 0.7rem;
              border-radius: 0 0.3rem 0.3rem 0.3rem;
              box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
              text-align: left;
              white-space: normal;
              word-wrap: break-word;
              /* 在单词的任意位置断行 */
              word-break: break-all;
              /* 在单词的任意位置断行 */
              audio,video{
                max-width: 100%;
              }
            }
          }
        }

        >li.right>.normal-message {
          flex-direction: row-reverse;
          >.content{
            padding-right: 0.7rem;
            padding-left: 0;
          }
          >.content>.msg {
            flex-direction: row-reverse;

            >.tri {
              margin-left: -1px;
              border-width: 1rem 0.7rem 0 0;
              border-color: var(--theme-primary-color) transparent transparent transparent;
            }

            >.msg_inner {
              border-radius: 0.3rem 0 0.3rem 0.3rem;
              background-color: var(--theme-primary-color);
            }
          }
        }

        >li.li-tips-message {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 1rem;
          padding: 0;
        }

        >li>.tips-message {
          width: 60%;
          text-align: center;
          font-size: 12px;
          line-height: 12px;
          color: var(--theme-black-11);
          background-color: var(--theme-white-f6);
          opacity: 0.7;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          border-radius: 0.2rem;
          padding: 0.5rem;
        }
      }
    }
    .footer {
      height: auto;
    }
  }
}

/*通讯录列表*/
.friend-list .van-cell__left-icon {
  height: 3rem;
  font-size: 3rem;
  line-height: 3rem;
  margin-right: 1rem;
  border-radius: 0.3rem;
}

.friend-list .van-cell__left-icon img {
  border-radius: 0.3rem;
}
